<template>
    <div class="app">
        <div class="nav"><Navict /></div>
        <div class="welcome">
            <div class="l-left">
                <img class="l-img" src="../static/about/cat-bg.png" alt="">
            </div>
            <div class="l-right">
                <div class="l-t">关于我们</div>
                <div class="l-title">一群用爱心为流浪动物带去温暖的人</div>
                <div class="l-txt">
                    我们的救助平台成立于2023年，在这段时间的运营中，我们吸引了一群志同道合的朋友。这些朋友是一群富有爱心、关爱流浪动物的人。他们来自不同的背景和年龄层，但都怀着对流浪宠物的怜悯之心。
<br>
                    这些朋友通过我们的平台，了解流浪宠物的处境和问题，积极参与志愿者活动，为流浪宠物提供帮助和关怀。他们不仅关注流浪宠物的生存问题，还关心它们的身心健康和幸福。
<br>
                    我们的朋友们有爱心、关爱流浪动物。他们用自己的行动，传递着温暖和爱心，让更多的流浪宠物得到关爱和帮助。<br>
我们非常荣幸能够拥有这样一群富有爱心、关爱流浪动物的朋友。他们的支持和参与，是我们平台不断发展和进步的动力。我们相信，在他们的共同努力下，我们能够为流浪宠物事业做出更大的贡献，让更多的流浪宠物得到关爱和帮助。
                </div>
            </div>
        </div>
        <div class="we-do">
            <div class="we-title"><span style="margin-top: 100px;height: 100px;">我们能干什么</span></div>
            <div class="we-info">
                <div class="info-t">
                    <div class="info-pic">
                        <img class="info-i" src="../static/about/宠物.png" alt="">
                    </div>
                    <div class="info-tit">宠物救助</div>
                    <div class="info-tit1">我们和朋友们会尽可能救助我们所见到的流浪宠物们，尽可能的暂时给它们一个家。然后等待它们主人的到来。</div>
                </div>
                <div class="info-t">
                    <div class="info-pic">
                        <img class="info-i" src="../static/about/医疗.png" alt="">
                    </div>
                    <div class="info-tit">健康检查</div>
                    <div class="info-tit1">救助宠物后我们与朋友们将会对宠物进行检查，以了解宠物们的健康状况。为他们未来的主人领养提供便利。</div>
                </div>
                <div class="info-t">
                    <div class="info-pic">
                        <img class="info-i" src="../static/about/宠物领养.png" alt="">
                    </div>
                    <div class="info-tit">宠物领养</div>
                    <div class="info-tit1">有需要的朋友们可以在我们平台上或者线下联系我们以了解如何领养小动物们。给小动物们一个温暖的家。</div>
                </div>
            </div>
        </div>
        <div class="nav-b">
            <ButtomNavict />
        </div>
    </div>
</template>

<script setup>
import Navict from '@/components/Navict.vue'
import ButtomNavict from '@/components/ButtomNavict.vue'
</script>

<style  scoped>
    .we-do{
        margin-top: 10px;
        width: 100%;
        height: 680px;
        background-image: url(../static/about/cat.jpg);
        background-size: 100% 100%;
    }
    .info-t{
        width: 25%;
        height: 400px;
        margin-top: 50px;
        display: flex;
        justify-content: space-evenly;
        flex-direction: column;
    }
    .info-tit{
        color: #03a850;
        margin:  auto;
        margin-top:30px;
        font-size: 20px;
        width: 80px;
        height: 30px;
        /* line-height: 20px; */
        font-weight: bold;
    }
    .info-tit1{
        width: 180px;
        height: 200px;
        margin: 0 auto;
        margin-top: 20px;
        color:#fff;
        font-size: 16px;
        line-height: 18px;
    }
    .info-pic{
        width: 100px;
        height: 100px;
        margin:0 auto;
    }
    .info-i{
        width: 100%;
        height: 100%;
    }
    .we-info{
        width: 100%;
        display: flex;
        justify-content: space-evenly;
    }
    .we-title{
        width: 100%;
        height: 200px;
        color: #fff;
        font-size: 50px;
        font-weight: bold;
        text-align: center;
        display: flex;
        flex-direction: column;
        justify-content: center;
        margin-top: 100px;
    }
    .app{
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
    }
    .nav{
        width: 100%;
        height: 200px;
        margin-bottom: 10px;
    }
    .welcome{
        width: 98%;
        margin: 15px;
        padding: 20px;
        display: flex;
        justify-content: space-between;
    }
    .l-left{
        width: 40%;
    }
    .l-txt{
        width: 100%;
        font-size: 20px;
        color: black;
        margin-top: 40px;
    }
    .l-title{
        width: 100%;
        font-size: 40px;
        line-height: 30px;
        font-weight: bold;
        color: #44ab67;
        margin-top: 10px;
    }
    .l-img{
        width: 100%;
        height: auto;
        border-radius: 10px;
    }
    .l-t{
        width: 100%;
        height: 40px;
        line-height: 30px;
        font-size: 18px;
        color: black;
    }
   .l-right{
        width: 57%;
        height: 100%;
        display: flex;
        flex-direction: column;
    }
</style>